<template>
 <div>
   <el-input
     placeholder="请输入有关课程名得关键字"
     v-model="courseName"
     :disabled="false" style="width: 250px;float: left">
   </el-input>
   <el-button type="success" size="small" style="float: left;margin-left: 20px" @click="selectBycName">点击搜索</el-button>
   <el-table
     :data="courseList"
     style="width: 100%"
     :row-class-name="tableRowClassName">
     <el-table-column
       prop="cname"
       label="课程名称"
       width="130">
     </el-table-column>
     <el-table-column label="课程展示图"   width="180">
       <template slot-scope="scope">
         　　　　<img :src="scope.row.cpic" width="120" height="50" class="head_pic"/>
       </template>
     </el-table-column>
     <el-table-column
       prop="teacher.thName"
       label="讲师名称"
       width="100">
     </el-table-column>
     <el-table-column
       prop="cprice"
       label="价格"
       width="60">
     </el-table-column>
     <el-table-column
       prop="cinfo"
       label="课程说明">
     </el-table-column>
     <el-table-column
       prop="type.tname"
       label="课程一级类别">
     </el-table-column>
     <el-table-column
       prop="classType.ctName"
       label="课程二级类别">
     </el-table-column>
     <el-table-column
       prop="cinfo"
       label="课程说明">
     </el-table-column>
     <el-table-column label="操作">
       <template slot-scope="scope">
         <el-button
           size="mini"
           @click="updateCourse(scope.row)">编辑</el-button>
         <el-button
           size="mini"
           type="danger"
           @click="deleteCourse(scope.row.cid)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>
   <el-pagination
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page.sync="currentPage1"
     :page-size="pageSize"
     layout="total, prev, pager, next"
     :total="total">
   </el-pagination>
 </div>

</template>
<script>
  export default {
    data() {
      return {
        courseName:'',
        courseList: [
          ],
        currentPage1: 1,
        pageSize:5,
        total:null
      }
    },
    mounted:function () {
      this.findPage()
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.findPage()
      },
      findPage(){
        this.$axios.get("http://127.0.0.1:8999/course/findPage?pageNo="+this.currentPage1+"&pageSize="+this.pageSize+"&courseName="+this.courseName).then(res=>{
          if(res.data.code==200){
            this.total=res.data.data.total;
            this.courseList=res.data.data.records
            console.log(this.courseList)
          }});
        },
      selectBycName(){
        this.findPage()
      },
      updateCourse(course){
        this.$router.push({name:"course",params:{course:course}})
      },
      deleteCourse(cid){
        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res=>{
          this.$axios.post("http://127.0.0.1:8999/course/deleteByCid?cid="+cid).then(res=>{
            if(res.data.code==200){
              this.$message.success('课程删除成功')
              this.findPage()
            }else{
              this.$message.error('课程删除失败')
            }
          })
        })
      }

    }
  }
</script>
¶固定表头
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
